<template>
  <div>
    <input
      @input="inp(value)"
      type="text"
      v-model="value"
      placeholder="请输入您要搜索的东西"
    />
    <button @click="tianjia">搜索</button>
    <p>搜索历史</p>
    <ul v-if="bool">
      <li v-for="(value, index) in arrNew" :key="index">
        {{ value }}
        <button class="xiao" @click="shan(index)">删除</button>
      </li>
    </ul>
    <button @click="shanquan">删除全部</button>
  </div>
</template>
<style scoped>
p{
  width: 100%;
  height: 1rem;
  background: #ccc;
  color: #fff;
  text-align: center;
  line-height: 1rem;
}
.xiao {
  width: 1rem;
  height: 0.8rem;
}
input {
  outline: none;
  width: 6rem;
  height: 1rem;
  box-sizing: border-box;
  padding-left: 0.6rem;
}
button {
  width: 1rem;
  height: 1rem;
}
* {
  margin: 0;
  padding: 0;
  font-size: 0.16rem;
}
</style>
<script>
export default {
  data() {
    return {
      value: "",
      arr: [],
      arrNew: [],
      bool: true,
    };
  },
  methods: {
    /* input 打印value */
    inp(value) {
      this.value = value;
    },
    /* 添加事件 */
    tianjia() {
      if (this.arr.indexOf(this.value) == -1) {
        this.arr.push(this.value);
      }
      localStorage.arrNew = JSON.stringify(this.arr);
      console.log(JSON.stringify(localStorage.arrNew));
      this.arrNew = JSON.parse(localStorage.arrNew);
    },
    /* 点击单个删除 */
    shan(index) {
      this.arrNew.splice(index, 1);
      localStorage.arrNew = JSON.stringify(this.arrNew);
    },
    /* 删除全部 */
    shanquan() {
      this.bool = false;
      localStorage.clear();
      this.value = "";
    },
  },
  /* 刷新页面渲染 */
  mounted() {
    if (localStorage.arrNew) {
      this.arrNew = JSON.parse(localStorage.arrNew);

    }
  },
};
</script>
